<template>
  <view class="cu-bar bg-white" :class="calcFixed()" style="padding: 10px" :style="`height:${systemStore.CustomBar}px;background-color:${bgColor}`">
    <slot name="left" v-if="left">
      <view class="action" @click="emit('leftClick')" :style="`margin-top:${systemStore.CustomBar / 2}px`">
        <text :class="`cuIcon-${leftIcon}`" class="text-gray" :style="`font-size:${props.leftIconSize}px;`"></text> {{ leftText }}
      </view>
    </slot>
    <slot name="title">
      <view class="content align-center" :style="`margin-top:${systemStore.CustomBar / 2}px`" :class="isBold()" @click="emit('titleClick')">
        {{ title }}
      </view>
    </slot>
    <slot name="right"> </slot>
  </view>
  <view v-if="safeArea && fixed" class="cu-bar bg-white" style="padding: 10px" :style="`height:${systemStore.CustomBar}px;background-color:${bgColor}`"> </view>
</template>
<script setup>
const app = getApp();
import { computed, reactive, ref, watch } from "vue";
import useSystemStore from "../../store/modules/system.js";
const systemStore = useSystemStore();
const emit = defineEmits(["leftClick", "titleClick"]);
const props = defineProps({
  title: {
    type: String,
    default: "uniapp",
  },
  bgColor: {
    type: String,
    default: "",
  },
  bold: {
    type: Boolean,
    default: false,
  },
  left: {
    type: Boolean,
    default: true,
  },
  leftIcon: {
    type: String,
    default: "back",
  },
  leftIconSize: {
    type: Number,
    default: 28,
  },
  leftText: {
    type: String,
    default: "返回",
  },
  fixed: {
    type: Boolean,
    default: false,
  },
  safeArea: {
    type: Boolean,
    default: true,
  },
});
// 计算固定
function calcFixed() {
  if (props.fixed) {
    return "fixed";
  }
  return "";
}
// 字体加粗样式 计算属性
function isBold() {
  if (props.bold) {
    return "text-bold";
  }
  return "";
}
// 初始化
systemStore.initSystem();
</script>
<style></style>
